<template>
  <div>
    <!-- 砍价列表卡品 -->
    <div class="list_item" v-for="(item,index) in goods" :key="index" @click="toDetails(item.id)">
      <div class="list_item_pic">
        <!-- pic商品首图 -->
        <img :src="item.pic" />
      </div>
      <div class="list_item_content">
        <p class="list_item_content_name">
          <!-- name商品名称 -->
          {{item.name}}
        </p>
        <p class="list_item_content_price">
          <span>
            <!-- minPrice	当前价格 -->
            现价:{{item.minPrice}}
          </span>
          <span>
            <!-- originalPrice商品原价 -->
            原价:{{item.originalPrice}}
          </span>
          <span>
            <!-- stores总库存数 -->
            库存:{{item.stores}}
          </span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goods: Array
  },
  methods: {
    toDetails(id) {
      this.$router.push({
        path: "/details",
        query:{
          id
        }
      });
    }
  }
};
</script>

<style scoped>
.list_item {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0.2rem 0rem;
}
.list_item_pic {
  flex: 1;
  /* background-color: purple; */
}
.list_item_pic img {
  width: 80%;
  margin-left: 10%;
}
.list_item_content {
  flex: 2;
}
.list_item_content p {
  width: 100%;
  height: 0.3rem;
  margin-top: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>